<template>
  <span
    :class="[styles.module, 'tr-text-label']"
    v-bind="{ ...attrs, ...mappingProps, ...labelStyle }"
    v-show="mappingProps.visible"
    @click="onClickHandler"
    :title="
      mappingProps.showHint
        ? mappingProps.hintMode == 'custom'
          ? mappingProps.hintMsg
          : label
        : null
    "
  >
    {{ label }}
  </span>
</template>

<script>
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { ref, defineComponent, watch, computed } from 'vue';
import styles from './index.module.scss';
import './index.scss';
import { cloneDeep, isNil } from 'lodash';

export default defineComponent({
  name: fixNameSpace('text-label'),
  props: {
    ...commonProps,
    icon: String,
    showIcon: Boolean,
    showHint: Boolean,
    hintMode: String,
    hintMsg: String,
    valueType: String,
    expression: String,
    text: String,
    mockValue: String,
    textColor: String,
    backgroundColor: String,
  },
  components: {},
  emits: ['click'],
  setup(props, { attrs, emit, expose, slots }) {
    const [mappingProps, mappingExpose] = useMappingProps(props);
    expose(mappingExpose);
    const label = ref('');
    const labelStyle = ref({});
    function init() {
      labelStyle.value.style = {};
      if (mappingProps.valueType == 'expression') {
        label.value = !!window['fas']?.inDesign
          ? mappingProps.mockValue
          : mappingProps.expression;
      } else {
        label.value = mappingProps.text;
      }
      labelStyle.value.style['background-color'] = mappingProps.backgroundColor;
      labelStyle.value.style['color'] = mappingProps.textColor;
    }
    init();
    function onClickHandler(e) {
      // 事件触发
      emit('click', e);
    }
    watch(
      () => {
        return [
          mappingProps.expression,
          mappingProps.valueType,
          mappingProps.mockValue,
          mappingProps.text,
          mappingProps.textColor,
          mappingProps.backgroundColor,
        ];
      },
      (newVal, oldVal) => {
        init();
      },
      { deep: true },
    );
    return { attrs, styles, mappingProps, label, labelStyle };
  },
});
</script>
